<template>
	<view class="app">
		<u-navbar :title="title" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="" style="margin-top: 100rpx;padding: 18rpx;">
			<view class="" v-for="item in data"
				style="display: flex;margin: 26rpx 0;background-color: white;padding: 18rpx;border-radius: 18rpx;">
				<view class="">
					<image :src="item.avatar" mode="" style="width: 76rpx;height: 76rpx;"></image>
				</view>
				<view class="" style="margin-left: 18rpx;width: 100%;">
					<view class="" style="display: flex;justify-content: space-between;">
						<text style="font-size: .9rem;font-weight: bold;">{{item.nick}}</text>
						<text style="color: #888;font-size: .8rem;">{{item.firstCommentTime}}</text>
					</view>
					<view class="" style="display: flex;">
						<u-rate v-model="item.score" readonly size="14"></u-rate>
						<text style="font-size: .8rem;color: #888;">{{item.specName}}</text>
					</view>
					<view class="" style="margin:20rpx 0;">
						<text>{{item.firstCommentContent}}</text>
						<view class="" style="margin-top: 20rpx;">
							<image v-for="img in item.firstCommentImageArry" :src="img" mode=""
								style="width: 150rpx;height: 160rpx;"></image>
						</view>
					</view>
					<view class="" v-if="item.replyContent" style="font-size: .8rem;">
						<text style="font-weight: bold;">商家回复：</text>
						<text>{{item.replyContent}}</text>
					</view>
				</view>
			</view>
			<view class="" style="text-align: center;color: #888;">
				<text>{{tips}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				productId: "",
				title: "",
				page: 1,
				tips: "正在加载"
			};
		},
		onLoad() {
			let routes = getCurrentPages()
			this.productId = routes[routes.length - 1].options.productId
			uni.request({
				url: "https://app-gw.juaiyouxuan.com/api-bff/openapi/product/comment-listV2?productId=" + this
					.productId + "&PageIndex=" + this.page,
				success: (res) => {
					this.data = res.data.data.commentListBasePageDto.list
					this.title = "商品评价 (" + res.data.data.disabledCount + ")"
					if (res.data.data.commentListBasePageDto.list == 0) {
						this.tips = "已无更多数据"
					}
				}
			})
		},
		onReachBottom() {
			this.page++
			uni.request({
				url: "https://app-gw.juaiyouxuan.com/api-bff/openapi/product/comment-listV2?productId=" + this
					.productId + "&PageIndex=" + this.page,
				success: (res) => {
					this.data = [...this.data, ...res.data.data.commentListBasePageDto.list]
					if (res.data.data.commentListBasePageDto.list == 0) {
						this.tips = "已无更多数据"
					}
				}
			})
		},
		methods: {
			rightClick() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less">
	.app {
		background-color: var(--bgcolor);
		min-height: 100vh;
	}
</style>